<template>
    <div class="my-approval-container">
      <!-- 搜索区域 -->
      <van-search 
        v-model="search" 
        placeholder="车牌号、司机、起点、终点" 
        background="#f5f5f5" 
        show-action 
        @search="onSearch"
        @cancel="onCancel"
      />
      <!-- 日期筛选区域 -->
      <div class="apply-top">
        <div class="date-wrapper">
          <div class="date-display" @click="showStartPicker = true">
            <span class="date-value">{{ startTime ? formatStartTime : '开始时间' }}</span>
          </div>
          <span class="separator">~</span>
          <div class="date-display" @click="showEndPicker = true">
            <span class="date-value">{{ endTime ? formatEndTime : '结束时间' }}</span>
          </div>
        </div>

        <van-dropdown-menu active-color="#1768EF">
          <van-dropdown-item 
            v-model="value1"
            :options="option1"
            :title="title1"
            @change="change1"
          />
        </van-dropdown-menu>
      </div>
      <!-- 开始时间弹框 -->
      <van-popup
        v-model="showStartPicker"
        position="bottom"
      >
        <van-datetime-picker
          :value="startTime || new Date()"
          type="datetime"
          :max-date="endTime || undefined"
          @confirm="onStartTimeConfirm"
          @cancel="onStartTimeCancel"
          :min-date="minDate"
        />
      </van-popup>
      <!-- 结束时间弹框 -->
      <van-popup
        v-model="showEndPicker"
        position="bottom"
      >
        <van-datetime-picker
          :value="endTime || new Date()"
          type="datetime"
          :min-date="startTime || minDate"
          @confirm="onEndTimeConfirm"
          @cancel="onEndTimeCancel"
        />
      </van-popup>
      <!-- 列表 -->
      <div class="case-list">
        <template v-if="list.length">
          <div 
            v-for="item in list" 
            :key="item.id"
            class="applyView"
            @click="goDetailTap(item.id)"
          >
            <div class="applyTitle">
              <span class="typeName">{{ item.departName }} {{ item.applyUserName }}</span>
            </div>
            
            <div class="applyContent">
              <p>{{ item.licenseNumber }} {{ item.driverName }}</p>
              <p>时间：{{ item.startTime }} 至 {{ item.endTime }}</p>
              <p>起点：{{ item.startingPoint }}</p>
              <p>终点：{{ item.dropOffPoint }}</p>
            </div>

            <div class="applyFooter">
              <div class="applyFooter-left">
                <div class="status">
                  {{ getStatusText(item.dealStatus) }}
                </div>
                <div 
                  class="long"
                  v-if="item.dealStatus === 4">
                  公里数：{{ item.tripKilom }}km
                </div>
              </div>
              <div 
                v-if="item.dealStatus === 4"
                class="look-track"
                @click.stop="goTrackTap(item.id)">
                查看轨迹
              </div>
            </div>
          </div>
        </template>
      </div>
      <!-- 点击去顶部 -->
      <div class="goTop" v-if="showTopButton" @click="scrollToTop">
        <!-- <img src="path/to/your/icon.png" alt="Go to top" /> -->
      </div>
    </div>
  </template>

<script>
import utils from "@/utils/utils.js"
export default {
  name:"DispatchRecord",
  data(){
    return{
      // 搜索框数据
      search: '',
      showTopButton:false,
      list: [
        {
          id: '1',
          departName: '技术部',
          applyUserName: '张三',
          licenseNumber: '京A12345',
          driverName: '李四',
          startTime: '2024-03-20 09:00',
          endTime: '2024-03-20 18:00',
          startingPoint: '北京市朝阳区',
          dropOffPoint: '北京市海淀区',
          dealStatus: 0,
          tripKilom: 20
        },
        {
          id: '2',
          departName: '市场部',
          applyUserName: '王五',
          licenseNumber: '京B12345',
          driverName: '赵六',
          startTime: '2024-03-21 10:00',
          endTime: '2024-03-21 17:00',
          startingPoint: '北京市西城区',
          dropOffPoint: '北京市东城区',
          dealStatus: 4,
          tripKilom: 15
        },
        {
          id: '3',
          departName: '市场部',
          applyUserName: '王五',
          licenseNumber: '京B12345',
          driverName: '赵六',
          startTime: '2024-03-21 10:00',
          endTime: '2024-03-21 17:00',
          startingPoint: '北京市西城区',
          dropOffPoint: '北京市东城区',
          dealStatus: 4,
          tripKilom: 15
        },
        {
          id: '4',
          departName: '市场部',
          applyUserName: '王五',
          licenseNumber: '京B12345',
          driverName: '赵六',
          startTime: '2024-03-21 10:00',
          endTime: '2024-03-21 17:00',
          startingPoint: '北京市西城区',
          dropOffPoint: '北京市东城区',
          dealStatus: 4,
          tripKilom: 15
        }
      ],
      isLoading: true,
      total: null,
      hasNextPage: true,
      showTop: true,
      show: false,
      showCalendar: false,
      startTime: null,
      endTime: null,
      minDate: new Date(2020, 0, 1),
      title1: '状态',
      value1: '',
      value3: '',
      pageNum: 1,
      option1: [
        { text: '全部', value: '' },
        { text: '待审批', value: '0' },
        { text: '待接收', value: '1' },
        { text: '待出行', value: '2' },
        { text: '出行中', value: '3' },
        { text: '已完成', value: '4' },
        { text: '已冲突', value: '5' }
      ],
      showStartPicker: false,
      showEndPicker: false,
      utils
    }
  },
  computed: {
    formatStartTime() {
      if (!this.startTime) return '';
      return utils.formatTime(this.startTime)
    },
    formatEndTime() {
      if (!this.endTime) return '';
      return utils.formatTime(this.endTime)
    }
  },
  methods:{
    /**
     * 根据状态码获取对应的状态文本
     * @param {number} status - 状态码
     * @returns {string} 状态文本
     */
    getStatusText(status) {
      const statusMap = {
        0: '待审批',
        1: '待接收',
        2: '待出行',
        3: '出行中',
        4: '已完成',
        5: '已冲突'
      }
      return statusMap[status] || ''
    },

    /**
     * 开始时间确认处理
     * @param {Date} time - 选择的时间
     */
    onStartTimeConfirm(time) {
      this.startTime = time;
      this.showStartPicker = false;
    },

    /**
     * 开始时间取消处理
     */
    onStartTimeCancel() {
      this.showStartPicker = false;
    },

    /**
     * 结束时间确认处理
     * @param {Date} time - 选择的时间
     */
    onEndTimeConfirm(time) {
      this.endTime = time;
      this.showEndPicker = false;
    },

    /**
     * 结束时间取消处理
     */
    onEndTimeCancel() {
      this.showEndPicker = false;
    },

    /**
     * 状态选择变更处理
     * @param {string} value - 选中的状态值
     */
    change1(value) {
      const obj = this.option1.find(item => item.value === value)
      this.title1 = obj.text
      this.value1 = obj.value
      this.list = []
      this.pageNum = 1
      this.getAllList()
    },

    /**
     * 搜索取消处理
     */
    onCancel() {
      this.pageNum = 1
      this.search = ''
      this.list = []
      this.getAllList()
    },

    /**
     * 搜索处理
     */
    onSearch() {
      this.pageNum = 1
      this.list = []
      this.getAllList()
    },

    /**
     * 获取列表数据
     * @returns {Promise<void>}
     */
    async getAllList() {
      // 如果正在加载中，则不重复请求
      if (this.isLoading) return;
      
      try {
        this.isLoading = true;
        this.list = this.pageNum === 1 ? mockData.rows : [...this.list, ...mockData.rows];
        this.total = mockData.total;
        this.hasNextPage = mockData.pageNum < mockData.totalPage;
        
      } catch (error) {
        this.$toast('获取数据失败');
      } finally {
        this.isLoading = false;
      }
    },

    // 点击按钮去顶部
    scrollToTop() {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    },
    // 滚动后 显示按钮
    handleScroll() {
      this.showTopButton = window.scrollY > 20; // 当滚动超过100px时显示按钮
    }
  },
  created() {
    this.getAllList();
  },
  mounted() {
    // 监听滚动事件
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    // 移除滚动事件
    window.removeEventListener('scroll', this.handleScroll);
  }
}
</script>




<style lang="scss" scoped>
.my-approval-container {
  background: #f5f5f5;
  height: calc(100vh - 50px);
  display: flex;
  flex-direction: column;
}

/* 搜索框样式 */
:deep(.van-search) {
  padding: 10px 12px;
  .van-search__content {
    background: #f7f7f7;
    border-radius: 4px;
  }
}
:deep(.van-cell) {
  background-color: #fff;
  padding-left: 10px;
}

/* 日期和状态选择区域 */
.apply-top {
  background: #fff;
  padding: 12px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.date-wrapper {
  display: flex;
  align-items: center;
  flex: 1;
}

.date-display {
  flex: 1;
  padding: 8px 12px;
  background: #f7f7f7;
  border-radius: 4px;
  color: #666;
  font-size: 14px;
}

.separator {
  padding: 0 8px;
  color: #999;
}

/* 状态选择器 */
:deep(.van-dropdown-menu) {
  height: 48px;
  margin-left: 12px;
  
  .van-dropdown-menu__bar {
    background: #f7f7f7;
    border-radius: 4px;
  }
  
  .van-dropdown-menu__title {
    font-size: 14px;
    padding-right: 8px;
    color: #666;
  }
}

:deep(.van-dropdown-menu__title::after ){
  right:0;
}

.case-list{
  padding-bottom: 20px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.applyView {
  width: 96%;
  box-sizing: border-box;
  padding: 18px 18px 0;
  margin: 20px auto;
  background-color: white;
  text-align: left;
  border: 1px solid #CCCCCC;
}
.applyView:nth-last-child(1){
  margin-bottom: 0;
}
.v1 {
  font-size: 24px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 20px;
  color: #666666;
  justify-content: space-between;
  width: 100%;
}

.v1 image {
  width: 18px;
  height: 24px;
  margin-right: 10px;
  vertical-align: middle;
}

.goTop {
  position: fixed;
  bottom: 4%;
  right: 5%;
  width: 46px;
  height: 46px;
  z-index: 100;
}

.applyTitle {
  font-size: 18px;
  padding: 0 0 15px 0;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #DDDDDD;
}

.typeName {
  font-weight: 600;
}

.date {

  color: #999999;
}


.c1 {
  color: #FF8832;
}

.c2 {
  color: #45CC81;
}

.c3 {
  color: #7BB5F9;
}

.applyContent {
  font-size: 15px;
}

.applyContent text {
  display: block;
  margin-top: 20px;
  color: #666666;
}

.applyFooter {
  display: flex;
  justify-content: space-between;
  height: 40px;
  line-height: 40px;
  padding: 5px;
  background: #f1f2f6;
  color: #3993F7;
  font-size: 18px;
}
.applyFooter-left{
  display: flex;
}
.applyFooter .status{
  width:80px;
  color:#45CC81;
  height: 40px;
  line-height: 40px;
  text-align: center;
}

.applyFooter .long {
  line-height: 40px;
  width: 120px;
  font-size: 16px;
  // background-color: skyblue;
}
.look-track{
  background: #3f84f1;
  font-size: 16px;
  color: #fff;
  padding: 0 4px;
  height: 32px;
  line-height: 32px;
  margin-top: 4px;
}

// 去顶部按钮
.goTop {
  position: fixed;
  bottom: 4%;
  right: 5%;
  width: 46px;
  height: 46px;
  z-index: 100;
  background-color: #3f84f1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.goTop img {
  width: 24px;
  height: 24px;
}
</style>